import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import {
  Form,
  Input,
  Select,
  Button,
  Checkbox,
  Card,
  Radio,
  message,
  Icon,
  Tooltip,
  Modal,
} from 'antd';
import styles from './system.less';
import {ruleP, nameMaxLength,remarkMaxLength} from '@/utils/rule'
const FormItem = Form.Item;
const { TextArea } = Input;
const CheckboxGroup = Checkbox.Group;
const RadioGroup = Radio.Group;
@connect(({editSystem, loading }) => ({
  editSystem,
  loading: loading.models.editSystem,
}))
@Form.create()
class editSystem extends PureComponent {
  state = {
    rightDo: [],
    disableValue: false,
    disableCopy: false,
    saveChecked: false,
    copyChecked: false,
    printChecked: false,
  }

  handleSubmit = e => {
    const { dispatch, form, editSystem: { data }} = this.props;
    e.preventDefault();
    form.validateFieldsAndScroll((err, values) => {
      const oneData = data&&data.dataList&&data.dataList.length&&data.dataList[0] || {};
      if (!err) {
        this.update(values,oneData);
      }
    });
  };

   // 提交
  update(values,oneData) {
    const { dispatch } = this.props;
    let obj = {
      saveAsRight: 1,
      copyRight: 1,
      printRight: 1,
    };
    values&&values.jurisdiction&&values.jurisdiction.length&&values.jurisdiction.map((v) =>{
      if(v==2){
        obj.saveAsRight = 0
      }else if(v==3){
        obj.copyRight = 0
      }else if(v==4){
        obj.printRight = 0
      }
    })   

    const parmas = {
      id: oneData.id,
      userType: 0,
      readonlyEditRight: values.readonlyEditRight,
      saveAsRight: values.readonlyEditRight==1?obj.saveAsRight:'',  
      copyRight: values.readonlyEditRight==0?obj.copyRight:'',
      printRight: values.readonlyEditRight==1?obj.printRight:'',
      remark: values.note,
    };

    dispatch({
      type: 'editSystem/update',
      payload: parmas,
      callback: (res) => {
        if(res.result == "ok") {
          Modal.success({
            title: res.msg,
          });
          this.pageList();
        }else {
          Modal.error({
            title: '操作失败',
            content: res.msg,
          });
        }
      },
    });
  }

  // 查询
  pageList() {
    const { dispatch } = this.props;
    dispatch({
      type: 'editSystem/queryList',
      payload: {userType:0},
      callback: (res) => {
        if(res.result == "ok") {
          if(res.data.dataList[0].readonlyEditRight==0){
            this.setState({
              disableValue: true,
              disableCopy: false,
            })
          }else{
            this.setState({
              disableValue: false,
              disableCopy: true,
            })
          }        
        }else {
          Modal.error({
            title: '操作失败',
            content: res.msg,
          });
        }
      },
    });
  }

  componentDidMount() {
    this.pageList();
  }

  onChange = e => {


  }

  onReadonlyEditRight = e => {
    const value = e.target.value;
    if(value == 0){
      this.setState({
        // rightDo: [2,4],
        
        saveChecked: true,
        copyChecked: false,
        printChecked: true,
        disableValue: true,
        disableCopy: false,
      })
    }else{
      this.setState({
        // rightDo: [],
       
        saveChecked: false,
        copyChecked: false,
        printChecked: false,
        disableValue: false,
        disableCopy: true,
      })
    }

  }

  render() {
    const {
      submitting,
      form: { getFieldDecorator, getFieldValue },
      editSystem: { data },
    } = this.props;
     const oneData = data&&data.dataList&&data.dataList.length&&data.dataList[0] || {};
     const { rightDo, disableValue, disableCopy, saveChecked, copyChecked, printChecked } = this.state;

     const initialValue = [];
     if(oneData.saveAsRight == 0){
        initialValue.push(2)
     }
     if(oneData.copyRight == 0){
        initialValue.push(3)
     }
     if(oneData.printRight == 0){
        initialValue.push(4)
     }
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 10 },
      },
    };

    const submitFormLayout = {
      wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 10, offset: 7 },
      },
    };

    return (
      <Card bordered={false}>
        <Form onSubmit={this.handleSubmit} hideRequiredMark style={{ marginTop: 8 }}>
          <FormItem {...formItemLayout} label="系统名称：">
            <span className="ant-form-text">数据安管追溯系统</span>
          </FormItem>

          <FormItem {...formItemLayout} label="编辑权限：">
            {getFieldDecorator('readonlyEditRight', 
              {rules: [{ required: true,message:'请选择编辑权限'}],initialValue:oneData.readonlyEditRight })(
              <RadioGroup onChange={this.onReadonlyEditRight}>
                <Radio value={0}>只读</Radio>
                <Radio value={1}>编辑</Radio>
              </RadioGroup>
            )}
          </FormItem>

          <FormItem {...formItemLayout} label="权限操作：">
            {getFieldDecorator('jurisdiction', {initialValue})(
              <CheckboxGroup>
                <Checkbox checked={copyChecked} key="copyKey" disabled={disableCopy} value={3}>禁止复制</Checkbox>
                <Checkbox checked={saveChecked} key="saveKey" disabled={disableValue} value={2}>禁止另存</Checkbox>
                <Checkbox checked={printChecked} key="printKey"disabled={disableValue} value={4}>禁止打印</Checkbox>
              </CheckboxGroup>
            )}
          </FormItem>

          <FormItem {...formItemLayout} label="备注：">
            {getFieldDecorator('note',{rules:[{max:remarkMaxLength()[0],message:remarkMaxLength()[1]}],initialValue:oneData.remark})(
              <TextArea
                style={{minHeight: 32}}
                rows={2}
              />)}
          </FormItem>

          <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
            <Button type="primary" htmlType="submit" loading={submitting}>
              提交
            </Button>
          </FormItem>
        </Form>
      </Card>
    );
  }
}

export default editSystem;
